NaN

第2节 css基础

(一) 在html中使用样式

在html中使用样式有三种方式:

  1. 内联样式
  2. 内部样式
  3. 外部样式

例1: 内联样式和内部样式 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
        /* 内部样式 */
        .box {
           color: green;
           font-size: 30px; 
        }
    </style>
</head>

<body>
    <!-- 内联样式 -->
    <div style="border:1px solid;color:red;">
        内联样式
    </div>

    <div class="box">
        内部样式
    </div> 

</body>
</html>

例2: 外部样式 

<!-- demo.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <!-- 内联样式 -->
    <div style="border:1px solid;color:red;">
        内联样式
    </div>

    <div class="box">
        内部样式
    </div> 

</body>
</html>

<!-- demo.css -->
.box {
	border:1px solid red;
	color: red;
}

(二) 选择器和优先级

(1) 选择器

常用选择器有以下这些:

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 群组选择器
  5. 后代选择器
  6. 选择器优先级

例1: 元素选择器 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        div {
            border: 1px solid;
        }
        p {
            background-color: green;
        }

    </style>
</head> 
<body>
    <div>
        div1
    </div> 
    <div>
        div2
    </div> 
    <p>
        pppppppp
    </p> 

    <p>2342342</p>
</body>
</html>

例2: id选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        #div1 {
            color: red;
        }
        #div2 {
            color: green;
        } 
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>    

    <div id="div2">
        div2
    </div>      
</body>
</html>

例3: class选择器 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1 {
            color: red;
        }
        .div2 {
            color: blue;
        }
    </style>
</head> 
<body>
    <div class="div1">
        div1
    </div> 
    <div class="div2">
        div2
    </div> 
    <p class="div1">
        pppppppp
    </p> 
</body>
</html>

例4: 群组选择器 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            color: red;
        }
        #aa {
            color: red;
        }
        p {
            color: red;
        } */
        /* 以上可以使用群组选择器 */
        .box,#aa,p {
            color: red;
        }

    </style>
</head>

<body>
    <div class="box">
        div1
    </div>

    <div id="aa">
        div2
    </div>

    <p>
        pppp
    </p>
</body> 
</html>

例5: 后代选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        /* 后代选择器 */
        .box1 .aa {color: red;}
        .box2 li {color: green;} 
    </style>
</head>
<body>
    <ul class="box1">
        <li class="aa">111</li>
        <li class="aa">111</li>
        <li class="aa">111</li>
    </ul>

    <ul class="box2">
        <li class="aa">2222</li>
        <li class="aa">2222</li>
        <li class="aa">2222</li>
    </ul> 
</body>
</html>

(2) 选择器优先级

知识点:

  1. 样式层叠, 样式继承, 样式覆盖

  2. 内联样式 > 内部样式 > 外部样式 (就近原则)

  3. id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器

例1: 样式层叠, 样式继承, 样式覆盖 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .big {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!-- 样式层叠,red和big的效果叠加在div上 -->
  <div class="red big">
    <!-- span的颜色和大小也发生了变化,因为继承了div元素 -->
    <span>
      我爱web前端
    </span>
  </div>
</body>
</html>

例2: 内联样式 > 内部样式 > 外部样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <link rel="stylesheet" href="./demo6.css">
    <style>
        /* 内部样式 */
        .box {
            font-size: 30px; 
            border: 1px solid red;
        }
    </style>
</head>
<body> 
    <!-- 内联样式 -->
    <div class="box" style="color: red;font-size: 10px;">
        box 
    </div>

</body>
</html>

例3: id选择器 > class选择器 > 元素选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            color: blue;
        }
        .box {
            color: green;
        }
        /* 元素选择器 */
        div {
           color: red; 
        }
    </style>

</head>
<body>
    <div id="box" class="box">
        div
    </div>
</body>
</html>

(三) 常用基础样式

css常用基础样式有:

  1. 边框border
  2. 宽高设置
  3. 背景颜色
  4. margin
  5. padding设置
  6. 圆角设置
  7. 文字大小、颜色、行高、粗细
  8. 对齐方式设置

例1: 边框, 宽高设置, 背景颜色 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 边框 */
          border: 5px solid red;  
          /* 宽 */
          width: 300px;
          /* 高 */
          height: 300px;
          /* 背景颜色 */
          background-color: gray;
        }
    </style>
</head>
<body>
    <!-- 边框 -->
     <div class="box">div</div>   
</body>
</html>

例2: margin外边距 

<!-- demo1 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            /* margin: 50px; */
            /* top上,right右,bottom下,left左 */
            margin-top: 50px;
            margin-left: 100px;
            margin-right: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        box
    </div>
</body>
</html>

<!-- demo2,合并写法 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
        .box {
            width: 300px;
            height: 300px;
            background-color: gray;
            /* 四个方向的合并写法 */
            margin: 30px;
        }
    </style>
</head>

<body>  
    <div class="box">
        box
    </div> 
</body> 
</html>

例3: padding内边距 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding-top: 15px;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件
        阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件 阿萨德飞拉萨到付件
        阿萨德飞拉萨到付件
    </div>
</body>
</html>

例3.2 margin和padding应用

例4: 圆角设置border-radius 

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础demo1</title>
    <style>
        .box1,
        .box2 {
            height: 200px;
            width: 200px;
            border: 1px solid;
        } 
        .box1 {

            /* 设置圆角 */
            border-radius: 10px;
        } 
        .box2 {
            margin-top: 50px;
            border-radius: 50%;
        }
    </style>
</head> 
<body>
    <div class="box1"> </div> 
    <div class="box2"> </div> 
</body> 
</html>

例5: 文字大小,颜色,行高,粗细 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础demo1</title>
    <style> 
        .box {
            border: 1px solid;
            padding: 10px;
            width: 300px;
            /* 字体大小 */
            font-size: 20px;
            /* 字体颜色 */
            color: red;
            /* 行高 */
            /* line-height: 50px; */
            line-height: 1.5;
            /* 加粗100~900或者bold */
            /* font-weight: 500; */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        阿斯顿发送到发送到发阿斯顿发阿斯顿发阿斯顿发阿萨德发
        阿斯顿发送到发送到发阿斯顿发阿斯顿发阿斯顿发阿萨德发
        阿斯顿发送到发送到发阿斯顿发阿斯顿发阿斯顿发阿萨德发
        阿斯顿发送到发送到发阿斯顿发阿斯顿发阿斯顿发阿萨德发
        阿斯顿发送到发送到发阿斯顿发阿斯顿发阿斯顿发阿萨德发
    </div> 
</body> 
</html>

例6: 文本对齐方式设置 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 100px;
            border: 1px solid red;
            /* 文本对齐方式 */
            text-align: left; /*左对齐*/
            text-align: right; /*右对齐*/
            text-align: center; /*居中*/
            /* 垂直对齐: 让行高=元素的高度 */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        我爱web前端
    </div> 
</body>
</html>